<template>
	<view class="container" v-if="homePageData">
		<template v-for="item in homePageData">
			<view class="banner" v-if="item.name == 'limo-slide'">
				<img :src="item.data.imgList[0].imgUrl" alt="" />
			</view>
			<view class="part" v-if="item.name == 'member-info'">
				<view class="vipCard">
					<img :src="homePageData[0].data.imgList[0].imgUrl" alt="头像" />
					<view class="content">
						<view class="title font bold">
							<view class="">
								Hi 你好
							</view>
							<view class="tag">
								幸福会员
							</view>
						</view>
						<view class="vip font">
							<view class="price">
								余额 0
							</view>
							<view class="price">
								积分 0
							</view>
							<view class="price">
								优惠券 0
							</view>
						</view>
					</view>
					<view class="">

					</view>
				</view>
			</view>
			<view class="part" v-if="item.name == 'custom-business-entry' && item.id == 23569855">
				<view class="custom-business-entry">
					<view class="businessList" v-for="business in item.data?.businessList ">
						<view class="business"  @click="goMenu">
							<img :src="business.imgUrl" alt="" />
							<view class="">
								{{business.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="part" v-if="item.name == 'custom-business-entry' && item.id == 23569856">
				<view class="custom-business-entry">
					<view class="businessList" v-for="business in item.data?.businessList ">
						<view class="business-1">
							<img :src="business.imgUrl" alt="" />
							<view class="">
								{{business.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
			<view class="popup">
				<img :src="homePageData[4].data.imgInfos.imgUrl" alt="" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homePageData: null,
			}
		},
		methods: {
			goMenu(){
				uni.switchTab({
					url: '/pages/menu/menu'
				});
			},
			getHomePageData() {
				uni.request({
					url: '/sipsite/home.json', //仅为示例，并非真实接口地址。
					data: {
						text: 'uni.request'
					},
					success: (res) => {
						this.homePageData = res.data.data.modules;
						console.log(this.homePageData);
						this.$nextTick(() => {
							if (this.$refs.popup && this.$refs.popup.open) {
								this.$refs.popup.open();
							} else {
								console.warn('uni-popup 组件未正确加载');
							}
						});
					}
				});

			},
			open() {
				console.log("ref", this.$refs.popup);
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			}
		},
		created() {
			this.getHomePageData()
		},
		mounted() {

		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #e4e3e2;
		height: 100vh;

		.banner {
			width: 100vw;
			height: auto;

			img {
				width: 100%;
			}
		}

		.part {
			padding: 20rpx 40rpx;
		}

		.vipCard {
			background-color: #0a79c5;
			width: 100%;
			border-radius: 30rpx;
			height: 100rpx;
			display: flex;
			// justify-content: space-around;
			align-items: center;

			img {
				border-radius: 50%;
				width: 70rpx;
				height: 70rpx;
				margin: 0 40rpx;
			}

			.content {
				.font {
					font-size: 28rpx;
					color: #fff;
				}

				.title {
					display: flex;

					.tag {
						font-size: 20rpx;
						padding: 4rpx;
						background-color: #ededd7;
						margin-left: 8rpx;
						border-radius: 8rpx;
						color: #333;
					}
				}

				.vip {
					display: flex;

					.price {
						font-size: 24rpx;
						padding: 4rpx;
						margin-right: 10rpx;
					}
				}
			}

			.bold {
				font-weight: bold;
			}
		}

		.custom-business-entry {
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			border-radius: 40rpx;

			.businessList {
				.business {
					width: 66%;
					padding: 40rpx;
					text-align: center;

					img {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.business-1 {
					width: 66%;
					padding: 40rpx;
					text-align: center;
					display: flex;
					align-items: center;

					img {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}

		.popup {
			width: 70vw;
			height: 60vh;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 20rpx;
			}
		}
	}
</style>